<template>
  <div>
    <div class="table-box">
      <span class="table-title">桌台区域</span>
      <el-tree
        :data="treeListData"
        show-checkbox
        node-key="id"
        @check="handleCheckChange"
        :props="defaultProps"
        :default-expanded-keys="defaultCheckedKeysList"
        :default-checked-keys="defaultCheckedKeysList"
        check-on-click-node
      />
    </div>
    <div class="btn-group-box">
      <div class="btn-right-box">
        <span class="cancel" @click="handleBack">返回</span>
        <span class="submit" @click="handleUpdate">确认</span>
      </div>
      <span class="total"></span>
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { printerSettingDetail, updatePrinterSetting } from '@/api/computer'
import { isEmpty } from '@/utils/toolsValidate'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

const treeListData = ref([])
const defaultProps = reactive({ children: 'children', label: 'label' })
const originSettingList = ref([])
const defaultCheckedKeysList = ref([])

onMounted(() => { getPrinterSettingDetail() })

function handleCheckChange(data, checked, indeterminate) {
  if (checked.checkedKeys.includes(data.id)) {
    if (data.id === '0') { originSettingList.value.forEach(item => { item.check = 1 }); return }
    originSettingList.value.forEach(item => { if (data.id === item.id) item.check = 1 })
  } else {
    if (data.id === '0') { originSettingList.value.forEach(item => { item.check = 0 }); return }
    originSettingList.value.forEach(item => { if (data.id === item.id) item.check = 0 })
  }
}

function getPrinterSettingDetail() {
  printerSettingDetail({ key: 'region', printer_id: route.query.printer_id }).then(res => {
    if (!isEmpty(res?.data?.setting)) {
      originSettingList.value = res.data.setting
      const dataList = []
      res.data.setting.forEach(item => {
        if (item.check === 1) defaultCheckedKeysList.value.push(item.id)
        dataList.push({ label: item.name, id: item.id })
      })
      treeListData.value = [{ label: '全部', id: '0', children: dataList }]
    }
  })
}

function handleUpdate() {
  const datas = { printer_id: route.query.printer_id, key: 'region', values: originSettingList.value }
  updatePrinterSetting(datas).then(res => {
    if (res.status === 200) {
      ElMessage.success('更新设置成功')
      defaultCheckedKeysList.value = []
      getPrinterSettingDetail()
    }
  })
}

function handleBack() { router.back() }
</script>

<style lang="scss" scoped>
.table-box { height: 700px; overflow-y: auto; box-sizing: border-box; padding: 58px 0 0 50px; display: flex; flex-direction: column; }
.table-box .table-title { font-size: 18px; font-family: PingFang SC, PingFang SC-Regular; font-weight: 400; color: #000000; margin-bottom: 32px; }
.btn-group-box { display: flex; justify-content: space-between; padding: 60px 30px 30px 60px; box-sizing: border-box; align-items: center; }
.btn-group-box .total { font-size: 14px; font-family: PingFang SC, PingFang SC-Regular; font-weight: 400; color: #333333; }
.btn-group-box .btn-right-box { display: flex; }
.btn-group-box .btn-right-box .cancel { width: 98px; height: 50px; background: #ffffff; border: 1px solid #333333; border-radius: 12px; display: flex; justify-content: center; align-items: center; font-size: 18px; font-family: PingFang SC, PingFang SC-Regular; font-weight: 400; color: #333333; margin-right: 40px; cursor: pointer; }
.btn-group-box .btn-right-box .submit { width: 336px; height: 52px; background: #7c0a03; border-radius: 12px; display: flex; justify-content: center; align-items: center; font-size: 18px; font-family: PingFang SC, PingFang SC-Regular; font-weight: 400; color: #ffffff; cursor: pointer; }
</style>
